<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName获取checkbox进行全选</title>
    <style type="text/css">
            #myTable{ width: 900px; margin: 0px auto; background-color: #008000;}
			#myTable td,#myTable th{ background-color: white;}
			#myDiv{width: 900px; margin: 0px auto; height: 30px; line-height: 30px; 
			text-align: center;}
    </style>
</head>

<body>
    <table cellspacing="1" id="myTable">
        <tr>
            <th width="200">
                <input type="checkbox" id="selAll" onchange="selectAll()" />全选
                <input type="checkbox" id="selInvert" onchange="selectInvert()" />反选
            </th>
            <th width="200">姓名</th>
            <th width="200">性别</th>
            <th width="200">专业</th>
            <th width="200">爱好</th>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>刘备</td>
            <td>男</td>
            <td>软件开发</td>
            <td>抽烟</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>关羽</td>
            <td>男</td>
            <td>国际贸易</td>
            <td>喝酒</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>张飞</td>
            <td>男</td>
            <td>园林设计</td>
            <td>烫头发</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>赵云</td>
            <td>男</td>
            <td>平面设计</td>
            <td>抽烟</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>黄忠</td>
            <td>男</td>
            <td>影视制作</td>
            <td>玩游戏</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>小乔</td>
            <td>女</td>
            <td>高级护理</td>
            <td>唱歌</td>
        </tr>
    </table>
    <script>
        //全选
        var num = 0;
        var inputArr = document.querySelectorAll("tr td input");
        function selectAll() {
            var demo = document.querySelector("#selAll").checked;
            //console.log(demo);
            if (demo) inputArr.forEach(e => e.checked = true);
            else inputArr.forEach(e => e.checked = false);
            if(demo){
                num = inputArr.length;
            }
        }
        //给每个按键都绑定切换事件
        for (let i = 0; i < inputArr.length; i++) {
            inputArr[i].onchange = function () {
                var demo = document.querySelector("#selAll");
                inputArr[i].checked == true ? num++ : num--;
                if(num == inputArr.length){
                    demo.checked =true;
                }else{
                    demo.checked =false;
                }
                console.log(num);
            }
        }
        //反选
        function selectInvert(){
            for(let i = 0; i< inputArr.length;i++){
                if(inputArr[i].checked==true){
                    inputArr[i].checked=false;
                }else{
                    inputArr[i].checked=true;
                }
            }
        }

        





       
    </script>
</body>

</html>